 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/easyui/themes/metro-red/easyui.css">
<title>新增题库</title>
</head>
<body>
<style type="text/css">
ul li{
	list-style:none;
	margin-top:10px;
	color:#666666;
	font-size:13px;
}
.inserttile{
	width:1000px;
	height:40px;
	margin:auto;
	display:block;
	color:#19AA8D;
	font-size:16px;
	text-align:center;
	line-height:35px;
	font-weight:bold;
	background-color:#F4F4F4;
}
.insertitems{
	width:800px;
	height:224px;
	margin:20px auto;
	display:block;
	border:solid 1px #F3F3F3;
}
.insert-contents{
	width:800px;
	height:25px;
	margin:auto;
	border-bottom:solid 1px #F3F3F3;
}
.insertfirst{
	width:580px;
	height:25px;
	color:#19AA8D;
	font-size:13px;
	line-height:25px;
	text-align:center;
	font-weight:bold;
	float:left;
}
.inserttwo{
	width:216px;
	height:25px;
	color:#19AA8D;
	font-size:13px;
	line-height:25px;
	text-align:center;
	font-weight:bold;
	float:left;
	border-left:solid 1px #F3F3F3;
}
.insert-center{
	width:800px;
	height:30px;
	margin:auto;
	border-bottom:solid 1px #F3F3F3;
}
.insertthree{
	width:800px;
	height:30px;
	display: block;
	margin:auto;
	line-height:30px;
}
.insertleft{
	with:500px;
	height:30px;
	color:#19AA8D;
	font-size:13px;
	float:left;
	font-weight:bold;
}
.insertright{
	width:200px;
	height:30px;
	float:right;
}
.insert-delete{
	width:60px;
	height:20px;
	font-size:13px;
	border: none;
	color:white;
	margin-left:60px;
}
.icon-items-delete{
	padding-left: 20px;
	background:url('static/easyui/themes/icons/shanchu.png') no-repeat 5% 50%;
	background-color:#C9302C;
}
.insert-nrxx{
	width:800px;
	height:130px;
	display: block;
	margin:auto;
}
.insertfour{
	width:580px;
	height:130px;
	float:left;
	margin-top:-4px;
}
.insertfive{
	width:215px;
	height:172px;
	float:right;
	margin-top:-4px;
	text-align:center;
	line-height:150px;
	font-size:14px;
	border-left:solid 1px #F3F3F3;
}
.insertbottom{
	width:1000px;
	height:30px;
	box-shadow: 0 -2px 13px #bee3e6;
	display: block;
	position: fixed;
	bottom: 0px;
	margin-left:90px;
}
.insertsix{
	width:700px;
	height:25px;
	float:left;
	margin:2px;
}
.insertseven{
	width:200px;
	height:25px;
	float:right;
	margin:2px;
}
.insertsix ul li{
	float:left;
	color:white;
	margin-top:3px;
	margin-left: 10px;
}
.itemchoose{
	width:60px;
	height:20px;
	border: none;
}
.icon-items-tianjia{
	padding-left: 20px;
	background:url('static/easyui/themes/icons/jiahao.png') no-repeat 5% 50%;
	background-color:#2BB097;
}
.itemdianji{
	width:60px;
	height:20px;
	border:none;
	color:white;
}
.itembaocun{
	width:60px;
	height:20px;
	border:none;
	color:white;
	margin-left: 20px;
}
.icon-items-fanhui{
	padding-left: 20px;
	background:url('static/easyui/themes/icons/fanhui.png') no-repeat 5% 50%;
	background-color:#EC971F;
}
.icon-items-baocun{
	padding-left: 20px;
	background:url('static/easyui/themes/icons/baocun.png') no-repeat 5% 50%;
	background-color:#2BB097;
}
button {
	border-radius:3px;
	cursor:pointer;
	color:white;
}
#insertitem-danx{
	width:600px;
    border: solid 1px #DADADA;
    margin: auto;
}
.insert-centers{
	width: 480px;
    height: 220px;
    float: left;
}
.danx-title{
 	width: 480px;
    height: 40px;
    display: block;
    font-size: 13px;
    color: #666666;
    margin-top: 10px;
    margin-left: 10px;
 }
 .danx-anser{
 	height: 35px;
    outline: medium;
    margin: 5px 0px;
    border: none;
 }
 .oneanser,.twoanser{
 	width: 430px;
    height: 30px;
    outline: medium;
    border: none;
    border-bottom: solid 3px #F3F3F3;
 }
 .insert-staff{
 	width: 95px;
    height: 250px;
    float: right;
    border-bottom: solid 1px #F3F3F3;
    border-left: solid 1px #F3F3F3;
 }
 .danx-staff{
 	width: 95px;
    height: 110px;
    float: right;
    font-size: 13px;
    line-height: 110px;
    color: #666666;
    text-align: center;
    border-bottom: solid 1px #F3F3F3;
 }
 .danx-people{
 	width: 95px;
    height: 70px;
    font-size: 13px;
    line-height: 110px;
    color: #666666;
    text-align: center;
 }
 .insert-continue{
 	width:120px;
 	height:30px;
 	display: block;
 	margin:auto;
 }
 .continue{
 	width:120px;
 	height:22px;
 }
 .items-timu{
 	width: 580px;
    height: 180px;
    margin: 10px auto;
 }
 .bottom-cz{
 	width:170px;
 	height:30px;
 	float:right;
 }
 #botquxiao,#bottomquxiao,#pandquxiao,#jiandquxiao{
 	width:60px;
 	height: 23px;
    color: black;
    font-size: 13px;
    margin-left: 15px;
    cursor: pointer;
    background-color: white;
    border: solid 2px #e5e6e7;
 }
 #botqueding,#bottomqueding,#pandqueding,#jiandqueding{
 	width:56px;
 	height:20px;
 	color:white;
 	font-size:13px;
 	margin-left:15px;
 	cursor: pointer;
 	border:none;
 	background-color:#2BB097;
 }
  .jianda-anser{
 	width:480px;
 	height:135px;
 	border: solid 1px #F3F3F3;
 }
 .shurutitle{
 	width: 330px;
    height: 30px;
    outline: medium;
    border: none;
    border-bottom: solid 3px #F3F3F3;
    font-size: 13px;
    color: #666666;
    margin-left: 10px;
 }
 .dantitle,.duotitle,.pantitle,.jiantitle{
 	width: 430px;
    height: 30px;
    border: none;
    outline: medium;
    border-bottom: solid 3px #F3F3F3;
 }
 .daian{
 	float: right;
    width: 555px;
    height: 30px;
    line-height: 30px;
 }
 .daian span{
 	margin-left: 20px;
 }
 .li{
 	height: 30px;
 }
 .danxuan{
 	margin: 8px 5px;
 }
 .pan{
 	margin-left: 50px;
    margin-top: 40px;
 }
 .wuxuanxiang{
	font-size: 20px;
	line-height: 100px;
	margin-left: 50px;
}
</style>
<script type="text/javascript">
	var array=[];
	function add(type,title,a,b,c,d,bianji,xuan,ii){
		var obje={};
		obje["id"]=ii;
		var div1=$("<div>");
		var div2=$("<div>");
		var div3=$("<div>");
		var div4=$("<div>");
		var div5=$("<div>");
		var div6=$("<div>");
		var div7=$("<div>");
		var div8=$("<div>");
		var div9=$("<div>");
		var div10=$("<div>");
		var div11=$("<div>");
		var span1=$("<span>");
		var span2=$("<span>");
		var span3=$("<span>");
		var span4=$("<span>");
		var span5=$("<span>");
		var span6=$("<span>");
		var span7=$("<span>");
		var span8=$("<span>");
		var span9=$("<span>");
		var span10=$("<span>");
		var span11=$("<span>");
		var div12=$("<div>");
		var div13=$("<div>");
		var ul=$("<ul>");
		var li1=$("<li>");
		var li2=$("<li>");
		var li3=$("<li>");
		var li4=$("<li>");
		 var input1=$("<input>");
		 var input2=$("<input>");
		 var input3=$("<input>");
		 var input4=$("<input>");
		//var btn1=$("<button>");
		var btn2=$("<button>");
		var div14=$("<div>");
		var div15=$("<div>");
		var div16=$("<div>");
		var div17=$("<div>");
		
		div1.addClass("insertkstm");
		div1.attr("name",ii);
		div2.addClass("insertitems");
		div3.addClass("insert-contents");
		div4.addClass("insert-center");
		div5.addClass("insert-nrxx");
		div6.addClass("insertfirst");
		div7.addClass("inserttwo");
		div8.addClass("insertthree");
		div9.addClass("insertright");
		div10.addClass("insertfour");
		div14.addClass("daian");
		div15.addClass("daian");
		div16.addClass("daian");
		div17.addClass("daian");
		div11.addClass("insertfive");
		/* btn1.addClass("insert-bianji");
		btn1.addClass("icon-items-bianji"); */
		btn2.addClass("insert-delete");
		btn2.addClass("icon-items-delete");
		span3.addClass("shunxu");
		span9.addClass("wuxuanxiang");
		span10.addClass("neirong")
		div12.addClass("hidden");
		div13.addClass("insertleft");
		input1.addClass("danxuan");
		input2.addClass("danxuan");
		input3.addClass("danxuan");
		input4.addClass("danxuan");

		//上
		div12.html();
		div1.append(div12);
		span1.html("题目");
		span2.html("创建人");
		div6.append(span1);
		div7.append(span2);
		div3.append(div6);
		div3.append(div7);
		div2.append(div3);
		//中
		btn2.html("删除");
		btn2.click(function(){
			$.messager.confirm('确认窗口', '确定删除此题?', function(r){
					if(r){
						div1.remove();
						//1. 首先我们要得到这个对象
						var object = array.filter((p) => {
						    return p.id == div1.attr("name");
						});

						//2. 其次得到这个对象在数组中对应的索引
						var index = array.indexOf(object[0]);

						//3. 如果存在则将其删除，index > -1 代表存在
						index > -1 && array.splice(index, 1);
						console.log(array);				
					}
			});
		});
		//div9.append(btn1);
		div9.append(btn2);
		span3.html(title);
		//题目
		obje["title"]=title; 
		obje["a"]=a; 
		obje["b"]=b; 
		obje["c"]=c; 
		obje["d"]=d; 
		div13.append(span11);
		div13.append(span3);
		div8.append(div13);
		div8.append(div9);
		div4.append(div8);
		div2.append(div4);
		//下
		if(type==1||type==2){
			input1.attr("name",ii);
			input2.attr("name",ii);
			input3.attr("name",ii);
			input4.attr("name",ii);
            var value = new Array();
            var da ;
			if(type==1){
				input1.attr("type","radio");
				input2.attr("type","radio");
				input3.attr("type","radio");
				input4.attr("type","radio");
				da = document.getElementsByName('dan');
			}else{
				input1.attr("type","checkbox");
				input2.attr("type","checkbox");
				input3.attr("type","checkbox");
				input4.attr("type","checkbox");
				da = document.getElementsByName('duo');
			}
			 for(var i = 0; i < da.length; i++){
	             if(da[i].checked)
	             value.push(da[i].value);
	            }
			 var daan="";
			 for ( var ss in value) {
	            	if(value[ss]=="A"){
						input1.attr('checked','true');
					}else if(value[ss]=="B"){
						input2.attr('checked','true');
					}else if(value[ss]=="C"){
						input3.attr('checked','true');
					}else{
						input4.attr('checked','true');
					}
	            	daan+=value[ss];
			}
			obje["daan"]=daan; 
			li1.append(input1);
			li2.append(input2);
			li3.append(input3);
			li4.append(input4);
			span4.html(a);
			div14.html("A:");
			div14.append(span4);
			span5.html(b);
			div15.html("B:");
			div15.append(span5);
			span6.html(c);
			div16.html("C:");
			div16.append(span6);
			span7.html(d);
			div17.html("D:");
			div17.append(span7);
			li1.append(div14);
			li2.append(div15);
			li3.append(div16);
			li4.append(div17);
			ul.append(li1);
			ul.append(li2);
			ul.append(li3);
			ul.append(li4);
			div10.append(ul);
		}else if(type==3){
			input1.attr("name",ii);
			input2.attr("name",ii);
			input1.attr("type","radio");
			input2.attr("type","radio");
			 var value = new Array();
	            var da =document.getElementsByName('pan');
			 for(var i = 0; i < da.length; i++){
	             if(da[i].checked)
	             value.push(da[i].value);
	            }
			var daan="";
			for ( var ss in value) {
				 if(value[ss]=="T"){
						input1.attr('checked','true');
				}else if(value[ss]=="F"){
						input2.attr('checked','true');
				}
				daan+=value[ss];
			}
			obje["daan"]=daan; 
			div14.html("T");
			div15.html("F");
			li1.append(div14);
			li2.append(div15);
			li1.append(input1);
			li2.append(input2);
			ul.append(li1);
			ul.append(li2);
			div10.append(ul);
		}else{
			span9.html("无选项");
			div10.append(span9);
			obje["daan"]=null; 
		}
		span8.html("帅气小俊");
		div11.append(span8);
		div5.append(div10);
		div5.append(div11);
		div2.append(div5);
		div1.append(div2);
		array.push(obje);
		$("#testitems-xinzeng").append(div1);		
	}
	
	$(function(){	
		var ii=1;
		$("#zhezhao").hide();
		//点击单选按钮弹框
		$("#danx").click(function(){
			$("#insertitem-danx").window("open");
			$("#zhezhao").show();
		});
		/*点击单选按钮弹框中的取消*/
			$("#botquxiao").click(function(){
				$("#insertitem-danx").window("close");
				 $("#zhezhao").hide();
			});
		/*点击单选按钮弹框中的确定*/
			$("#botqueding").click(function(){
				var title=$(".dantitle").val();
				var a=$(".oneanser").eq(0).val();
				var b=$(".oneanser").eq(1).val();
				var c=$(".oneanser").eq(2).val();
				var d=$(".oneanser").eq(3).val();
				var da=$("#d").val();
				add(1,title,a,b,c,d,$("#insertitem-danx"),$(".oneanser"),ii);
				ii++;
				$("#insertitem-danx").window("close");
				 $("#zhezhao").hide();
				 console.log(array);
			});
		//点击多选按钮弹框
		$("#duox").click(function(){
			$("#insertitem-duox").window("open");
			$("#zhezhao").show();
		});
		/*点击多选按钮弹框中的取消*/
			$("#bottomquxiao").click(function(){
				$("#insertitem-duox").window("close");
				 $("#zhezhao").hide();
			});
		/*点击多选按钮弹框中的确定*/
			$("#bottomqueding").click(function(){
				var title=$(".duotitle").val();
				var a=$(".twoanser").eq(0).val();
				var b=$(".twoanser").eq(1).val();
				var c=$(".twoanser").eq(2).val();
				var d=$(".twoanser").eq(3).val();
				var da=$("#d").val();
				add(2,title,a,b,c,d,$("#insertitem-duox"),$(".twoanser"),ii);
				ii++;
				$("#insertitem-duox").window("close");
				 $("#zhezhao").hide();
			});
		//点击判断按钮弹框
		$("#pand").click(function(){
			$("#insertitem-pand").window("open");
			$("#zhezhao").show();
		});
		/*点击判断按钮弹框中的取消*/
			$("#pandquxiao").click(function(){
				$("#insertitem-pand").window("close");
				 $("#zhezhao").hide();
			});
		/*点击判断按钮弹框中的确定*/
			$("#pandqueding").click(function(){
				var title=$(".pantitle").val();
				var da=$("#d").val();
				add(3,title,0,0,0,0,$("#insertitem-pand"),null,ii);	
				ii++;
				$("#insertitem-pand").window("close");
				 $("#zhezhao").hide();
			});
				//点击简答按钮弹框
			$("#jiand").click(function(){
				$("#insertitem-jiand").window("open");
				$("#zhezhao").show();
			});
			/*点击简答按钮弹框中的取消*/
				$("#jiandquxiao").click(function(){
					$("#insertitem-jiand").window("close");
					 $("#zhezhao").hide();
				});
			/*点击简答按钮弹框中的确定*/
				$("#jiandqueding").click(function(){
					var title=$(".jiantitle").val();
					add(4,title,0,0,0,0,$("#insertitem-jiand"),null,ii);
					ii++;
					$("#insertitem-jiand").window("close");
					 $("#zhezhao").hide();
				});		
});
	$(function(){
		$("#itemfhjm").click(function(){
			add("testitems");
		});
		//点击确定
	/* 	$("#itembc").click(function(){
			//名称
			var titemremark = $("#titemremark").val();
			//类型
			var titemtypes = $("#titemtypes").val();
			//内容
			var titemall = $("#titemall").val();
			//答案
			var titemanswer = $("#titemanswer").val();
			//创建者
			var Staff_name = $("#Staff_name").val();
		}); */
	}); 
	//点击窗口自带的关闭按钮关闭窗口(单选)
	   $(document).ready(function(){		    
		   $('#insertitem-danx').window({
		       onBeforeClose:function(){ 
		    	   $("#zhezhao").hide();
		       }
		   });
		});
		//点击窗口自带的关闭按钮关闭窗口(多选)
	   $(document).ready(function(){		    
		   $('#insertitem-duox').window({
		       onBeforeClose:function(){ 
		    	   $("#zhezhao").hide();
		       }
		   });
		});
		//点击窗口自带的关闭按钮关闭窗口(判断)
	   $(document).ready(function(){		    
		   $('#insertitem-pand').window({
		       onBeforeClose:function(){ 
		    	   $("#zhezhao").hide();
		       }
		   });
		});
		//点击窗口自带的关闭按钮关闭窗口(简答)
	   $(document).ready(function(){		    
		   $('#insertitem-jiand').window({
		       onBeforeClose:function(){ 
		    	   $("#zhezhao").hide();
		       }
		   });
		});
</script>
<div id="testitems-xinzeng" style="margin-top:10px;">
<input type="hidden" id="d">
	  <div class="inserttile">
	  	<span>新增题目</span>
	  </div>	  
	<div class="insertbottom">
		<div class="insertsix">
		  <ul style="margin:0;">
			<li><button id="danx" class="itemchoose icon-items-tianjia">单选</button></li>
			<li><button id="duox" class="itemchoose icon-items-tianjia">多选</button></li>
			<li><button id="pand" class="itemchoose icon-items-tianjia">判断</button></li>
			<li><button id="jiand" class="itemchoose icon-items-tianjia">简答</button></li>
		  </ul>
		</div>
		<div class="insertseven">
			<button id="itemfhjm" class="itemdianji icon-items-fanhui">返回</button>
			<button id="itembc" class="itembaocun icon-items-baocun">保存</button>
		</div>
	</div>
</div>

<!-- 新增单选 -->
<div id="zhezhao" style="width:1366px;height:736px;position:fixed; top:0px;
background: rgba(0, 0, 0, 0.5);text-align:center;left:0;z-index:10;display:none;" >
 <div id="insertitem-danx" class="easyui-window" title="新增单选题" data-options="closed:true,minimizable:false,
 maximizable:false,collapsible:false">
 	<div class="items-timu">
 		<div class="insert-centers">
 			<div class="danx-title"><span>题目：</span><input type="text" class="dantitle" placeholder="请输入题目"></div>
 			<div class="danx-anser">
 				A:<input type="radio"  name="dan" class="dan" value="A" style="margin-left:10px;"><input type="text"  class="oneanser">
 			</div>
 			<div class="danx-anser">
 				B:<input type="radio" name="dan" class="dan" value="B" style="margin-left:10px;"><input type="text"  class="oneanser"> 			
 			</div>
 			<div class="danx-anser">
 			 	C:<input type="radio"  name="dan" class="dan" value="C" style="margin-left:10px;"><input type="text"  class="oneanser">
 			</div>
 			<div class="danx-anser">
				D:<input type="radio"  name="dan" class="dan" value="D" style="margin-left:10px;"><input type="text"  class="oneanser">
 			</div>
 		</div>
 		<div class="insert-staff">
 			<div class="danx-staff"><span>创建人</span></div>
 			<div class="danx-people"><span></span></div>
 		</div>
 	</div>
 	<div class="bottom-cz">
 		<button id="botquxiao">取消</button>
 		<button id="botqueding">确定</button>
 	</div>
 </div>
 </div>
 
 <!-- 新增多选 -->
<div id="zhezhao" style="width:1366px;height:736px;position:fixed; top:0px;
background: rgba(0, 0, 0, 0.5);text-align:center;left:0;z-index:10;display:none;" >
 <div id="insertitem-duox" class="easyui-window" title="新增多选题" data-options="closed:true,minimizable:false,
 maximizable:false,collapsible:false">
 	<div class="items-timu">
 		<div class="insert-centers">
 			<div class="danx-title"><span>题目：</span><input type="text" class="duotitle" placeholder="请输入题目"></div>
 			<div class="danx-anser">
 				A:<input type="checkbox"  name="duo" class="duo" value="A" style="margin-left:10px;"><input type="text"  class="twoanser">
 			</div>
 			<div class="danx-anser">
 				B:<input type="checkbox" name="duo" class="duo" value="B" style="margin-left:10px;"><input type="text"  class="twoanser"> 			
 			</div>
 			<div class="danx-anser">
 			 	C:<input type="checkbox"  name="duo" class="duo" value="C" style="margin-left:10px;"><input type="text"  class="twoanser">
 			</div>
 			<div class="danx-anser">
				D:<input type="checkbox"  name="duo" class="duo" value="D" style="margin-left:10px;"><input type="text"  class="twoanser">
 			</div>
 		</div>
 		<div class="insert-staff">
 			<div class="danx-staff"><span>创建人</span></div>
 			<div class="danx-people"><span></span></div>
 		</div>
 	</div>
 	<div class="bottom-cz">
 		<button id="bottomquxiao">取消</button>
 		<button id="bottomqueding">确定</button>
 	</div>
 </div>
 </div>
 
 <!-- 新增判断题 -->
 <div id="zhezhao" style="width:1366px;height:736px;position:fixed; top:0px;
background: rgba(0, 0, 0, 0.5);text-align:center;left:0;z-index:10;display:none;" >
 <div id="insertitem-pand" class="easyui-window" title="新增判断题" data-options="closed:true,minimizable:false,
 maximizable:false,collapsible:false">
<div class="items-timu">
 		<div class="insert-centers">
 			<div class="danx-title"><span>题目：</span><input type="text" class="pantitle" placeholder="请输入题目"></div>
 			<div class="danx-anser">
 				<input type="radio"  name="pan" class="pan" value="T"><span>T</span>
 				<input type="radio"  name="pan" class="pan" value="F"><span>F</span>
 			</div>
 		</div>
 		<div class="insert-staff">
 			<div class="danx-staff"><span>创建人</span></div>
 			<div class="danx-people"><span></span></div>
 		</div>
 	</div>
 	<div class="bottom-cz">
 		<button id="pandquxiao">取消</button>
 		<button id="pandqueding">确定</button>
 	</div>
 </div>
 </div>
 
   <!-- 新增简答题 -->
 <div id="zhezhao" style="width:1366px;height:736px;position:fixed; top:0px;
background: rgba(0, 0, 0, 0.5);text-align:center;left:0;z-index:10;display:none;" >
 <div id="insertitem-jiand" class="easyui-window" title="新增简答题" data-options="closed:true,minimizable:false,
 maximizable:false,collapsible:false">
<div class="items-timu">
 		<div class="insert-centers">
 				<div class="danx-title"><span>题目：</span><input type="text" class="jiantitle" placeholder="请输入题目"></div>
 		</div>
 		<div class="insert-staff">
 			<div class="danx-staff"><span>创建人</span></div>
 			<div class="danx-people"><span></span></div>
 		</div>
 	</div>
 	<div class="bottom-cz">
 		<button id="jiandquxiao">取消</button>
 		<button id="jiandqueding">确定</button>
 	</div>
 </div>
 </div>
</body>
</html>